<template>
  <div>
    <el-form label-width="110px" size="small" class="base-search-more">
       <el-row>
        <el-col :span="6">
          <el-form-item label="区域名称">
            <el-input style="width: 100%;" v-model="params.name" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
            <router-link :to="{path:'/main/company/add'}">
              <el-button type="primary" plain icon="el-icon-plus">新增</el-button>
            </router-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row type="flex">
              <el-col :span="8" class="item">
                <div class="title">区域信息</div>
                <ul>
                  <li>法人电话：{{props.row.legalMobile}}</li>
                  <li>管理员电话：{{props.row.adminMobile}}</li>
                  <li>区域账号：{{props.row.accounts}}</li>
                  <li>公司名称：{{props.row.name}}</li>
                </ul>
              </el-col>
              <el-col :span="8" class="item">
                <div class="title">区域数据</div>
                <ul>
                  <li>合同到期时间：{{props.row.contractEndTime}}</li>
                  <li>账号创建时间：{{props.row.createtime}}</li>
                  <li>上月营业总额：{{props.row.monthPay}}</li>
                  <li>上月订单总量：{{props.row.monthCount}}</li>
                </ul>
              </el-col>
              <el-col :span="8" class="item">
                <div class="title">区域上级</div>
                <ul>
                  <li>所属城市：{{props.row.province  + props.row.cityname + props.row.countyname}}</li>
                  <li>所属上级：{{props.row.agentname}}</li>
                  <li>所属角色：{{props.row.rname}}</li>
                </ul>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="区域名称" min-width="140" align="center"></el-table-column>
        <el-table-column prop="companyName" label="公司名称" width="160" align="center"></el-table-column>
        <el-table-column prop="contractEndTime" label="合同到期时间" min-width="120" align="center"></el-table-column>
        <el-table-column prop="monthPay" label="上月营业总额" min-width="120" align="center"></el-table-column>
        <el-table-column prop="monthCount" label="上月订单总量" min-width="120" align="center"></el-table-column>
        <el-table-column prop="agentname" label="所属上级" min-width="120" align="center"></el-table-column>
        <el-table-column prop="rname" label="所属角色" min-width="120" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <router-link :to="{path:'/main/company/add',query:{id:scope.row.id}}">
              <el-button class="el-text-check" type="text" size="mini">查看/修改</el-button>
            </router-link>
            <el-button class="el-text-warning" type="text" @click="editPassword(scope.row.id)"  size="mini">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
      <el-dialog title="修改密码" v-dialogDrag :visible.sync="dialogTableVisible" width="480px" >
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="85px" size='mini'>
          <el-form-item label="新密码" prop="password" :rules="[
                      {min: 6, max: 18, message: '密码6到18个字符', trigger: 'blur'},
                      {validator: validatePass1, trigger: 'blur'}]">
            <el-input v-model="ruleForm.password" type="password"></el-input>
          </el-form-item>

          <el-form-item label="确认新密码" prop="password1" :rules="[
                      {validator: validatePass2, trigger: 'blur'},
                      {min: 6, max: 18, message: '密码6到18个字符', trigger: 'blur'}]">
            <el-input v-model="ruleForm.password1" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading='isloadingsubmit'>保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import imd5 from '@/utils/md5.js'
  export default {
    data() {
      return {
        selectAgentMsg: '0', // 区域公司名称或公司电话 切换
        keyWord: '',  // 区域名称或者电话
        set: false,
        curOrderlist: {}, // 修改 选择数据
        params: { // 查询数据
          page: 0,
          size: 10,
          name: '' // 区域公司名称
        },
        ruleForm: {
          id:'',
          password: '',
          password1: '',
        },
        isloadingTable: false, //表单等待
        dialogTableVisible: false,
        isloadingsubmit:false,
        tableData: {} //表单数据
      }
    },
    methods: {
      validatePass1(rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password1 !== '') {
            this.$refs.ruleForm.validateField('password1')
          }
          callback();
        }
      },
      validatePass2(rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      editPassword(id){ // 修改密码
        this.dialogTableVisible = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
          this.ruleForm = Object.assign({}, this.$options.data().ruleForm)
        })
        this.ruleForm.id = id
      },
      submitForm(ruleForm) { // 提交密码修改
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            const params = {
              id: this.ruleForm.id,
              password: imd5.md5(this.ruleForm.password1)
            }
            this.isloadingsubmit = true
            this.$http.get('/server/agent/setPassword?'+this.qs.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message.success('密码修改成功')
                this.dialogTableVisible = false
              }
            }).finally(() => { this.isloadingsubmit = false })
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      getTableList() { // 获取表单数据
        this.isloadingTable = true
        const params = {...this.params }
        this.$http.get('/server/agent/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>
  .item .title {
    height: 30px;
    line-height: 30px;
    font-weight: bold;
  }

  .item ul li {
    line-height: 23px;
  }
</style>
